<style lang="less">
</style>
<template>
  <div>
    <Form :model="seachForm" inline :label-width="80" v-show="!isEditing">
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="seachForm.name" placeholder="请输入课程名"></Input>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>

    <ButtonGroup v-show="!isEditing">
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>

    <Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange"
           :columns="columns" :data="datas"></Table>
    <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" v-show="!isEditing"/>
    <Form v-if="isEditing" :model="dataForm" :label-width="80" :rules="validateRules">
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="dataForm.name" placeholder="请输入名称" type="text"></Input>
      </FormItem>
      <FormItem prop="times" :label="$t('course_times')">
        <Input v-model="dataForm.times" placeholder="请输入课时"></Input>
      </FormItem>
      <FormItem prop="category" :label="$t('category')">
        <Cascader :data="categories" v-model="dataForm['cate_id']"></Cascader>
      </FormItem>
      <FormItem prop="date_range" :label="$t('date_range')">
        <DatePicker type="daterange" :value="[dataForm.start_time,dataForm.end_time]" @on-change="handleDateChange"  placement="请选择时间范围" placeholder="请选择时间范围"></DatePicker>
      </FormItem>
      <FormItem prop="status" :label="$t('status')">
        <i-select v-model="dataForm.status">
          <i-option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
      </FormItem>
      <FormItem prop="grade" :label="$t('grade')">
        <Input v-model="dataForm.grade" type="textarea" :rows="4" placeholder="Enter something..."/>
      </FormItem>
      <FormItem prop="outline" :label="$t('outline')">
        <Input v-model="dataForm.outline" type="textarea" :rows="4" placeholder="Enter something..."/>
      </FormItem>
      <FormItem prop="preview" :label="$t('preview')">
        <Input v-model="dataForm.preview" type="textarea" :rows="4" placeholder="Enter something..."/>
      </FormItem>
      <FormItem prop="overview" :label="$t('overview')">
        <Input v-model="dataForm.overview" type="textarea" :rows="4" placeholder="Enter something..."/>
      </FormItem>
      <FormItem prop="reference" :label="$t('reference')">
        <Input v-model="dataForm.reference" type="textarea" :rows="4" placeholder="Enter something..."/>
      </FormItem>
      <FormItem prop="aim" :label="$t('aim')">
        <Input v-model="dataForm.aim" type="textarea" :rows="4" placeholder="Enter something..."/>
      </FormItem>
      <FormItem prop="avatar" :label="$t('avatar')">
        <Upload
          ref="upload"
          :show-upload-list="false"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          multiple
          type="drag"
          action="http://71bbs.people.com.cn/postImageUpload.do"
          style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button type="error" style="margin-left: 8px" @click="btnCancelClick">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
  import {getCourseList, getCourse, addCourse, updateCourse, deleteCourse} from '@/api/course'

  export default {
    name: 'course',
    data() {
      return {
        categories: [
          {
            value: '1',
            label: '北京',

          },
          {
            value: '2',
            label: '江苏',

          }],
        statusModel: true,
        validateRules: {
          times: [{type: "string", required: true, message: '格式不正确', pattern: /^\d*$/}],
          name: [{type: "string", required: true, message: '必填项'}],
          category: [{ required: true, message: '必填项'}],
          status: [{type: "string", required: true, message: '必填项'}],
          grade: [{type: "string", required: true, message: '必填项'}],
          outline: [{type: "string", required: true, message: '必填项'}],
          preview: [{type: "string", required: true, message: '必填项'}],
          overview: [{type: "string", required: true, message: '必填项'}],
          reference: [{type: "string", required: true, message: '必填项'}],
          aim: [{type: "string", required: true, message: '必填项'}],
        },
        statusList: [
          {label: '正常', value: 1},
          {label: '禁用', value: 2},
          {label: '待审核', value: 3},
        ],
        currentRow: null,
        isEditing: false,
        seachForm: {
          name: '',
          address: ''
        },
        pageInfo: {
          pageNumber: 1,
          pageSize: 10,
          totalRows: 0
        },
        dataForm: {
          status: 1
        },
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center',
          },
          {
            title: this.$t('name'),
            key: 'name'
          },
          {
            title: this.$t('avatar'),
            key: 'avatar',
            align: 'center',
            render: (create, record) => {
              const {avatar} = record.row;
              return create('Avatar', {
                props: {
                  shape: 'square',
                  size: 'large',
                  src: avatar
                }
              })
            }
          },
          {
            title: this.$t('course_times'),
            key: 'times'
          },
          {
            title: this.$t('people'),
            key: 'people'
          },
          {
            title: this.$t('category'),
            key: 'cate_id'
          },
          {
            title: this.$t('status'),
            key: 'status',
            align: 'center',
            render: (create, record) => {
              const status = record.row.status;
              console.log(status);
              const statusMap = {
                'success': '正常',
                'warning': '待审核',
                'error': '禁用'
              };
              let clazz = 'success';
              if (status === 2) { //禁用
                clazz = 'error';
              } else if (status === 3) { // 待审核
                clazz = 'warning';
              }
              return create('Tag', {
                props: {
                  type: clazz,
                },
                domProps: {
                  innerHTML: statusMap[clazz],
                },
              });
            }
          },
          {
            title: this.$t('start_time'),
            key: 'start_time',
            render(create,record) {
              const time = record.row['start_time'];
              return create('span',time.substr(0, 10));
            }
          },
          {
            title: this.$t('end_time'),
            key: 'end_time',
            render(create,record) {
              const time = record.row['start_time'];
              return create('span',time.substr(0, 10));
            }
          },
          {
            title: this.$t('grade'),
            key: 'grade',
            ellipsis: true
          },
          {
            title: this.$t('overview'),
            key: 'overview',
            ellipsis: true
          },
          {
            title: this.$t('preview'),
            key: 'preview',
            ellipsis: true
          },
          {
            title: this.$t('reference'),
            key: 'reference',
            ellipsis: true
          },
          {
            title: this.$t('aim'),
            key: 'aim',
            ellipsis: true
          },
        ],
        datas: [],
        timeRange:''
      }
    },
    mounted() {
      this.queryList();
    },
    methods: {
      seacherSubmit: function () {
        this.pageInfo.pageNumber = 1;
        this.queryList();
      },
      queryList: function () {
        var queryParams = {
          name: this.seachForm.name,
          pageNumber: this.pageInfo.pageNumber,
          pageSize: this.pageInfo.pageSize
        };
        getCourseList(queryParams).then(res => {
          this.datas = res.data.rows;
          this.pageInfo.totalRows = parseInt(res.data.total);
        });
      },
      pageNumberChange: function (pagenum) {
        this.pageInfo.pageNumber = pagenum;
        this.queryList();
      },

      tableCurrentChange: function (currentRow, oldCurrentRow) {
        this.currentRow = currentRow;
      },
      btnAddClick: function () {
        this.dataForm = {status: 1, avatar: 'https://i.loli.net/2017/08/21/599a521472424.jpg'};
        this.isEditing = true;
      },
      btnEditClick: function () {
        this.dataForm = this.currentRow;
        this.isEditing = true;
      },
      btnDelClick: function () {
        this.$Modal.confirm({
          title: '删除',
          content: '确定要删除选中的信息吗?',
          onOk: () => {
            this.delData();
          }
        });
      },
      btnSaveClick: function () {
        if (this.dataForm.id) {
          updateCourse(this.dataForm.id, this.dataForm).then(res => {
            if (res.data && res.data.affectedRows > 0) {
              this.$Message.success('保存成功!');
              this.queryList();
              this.isEditing = false;
            } else {
              this.$Message.error(res.error);
            }
          });
        } else {
          addCourse(this.dataForm).then(res => {
            if (res.data && res.data.affectedRows > 0) {
              this.$Message.success('保存成功!');
              this.queryList();
              this.isEditing = false;
            } else {
              this.$Message.error(res.error);
            }
          });
        }
      },
      btnCancelClick: function () {
        this.isEditing = false;
      },
      delData: function () {
        deleteCourse(this.currentRow.id).then(res => {
          console.log(res);
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('删除成功!');
            this.queryList();
          } else {
            this.$Message.error('删除失败!');
          }
        });
      },
      handleDateChange(val) {
        this.dataForm.start_time = val[0];
        this.dataForm.end_time = val[1];
      }
    },
  }

</script>
